<template>
	<view class="normal-login-container">
		<div class="mox">
			<swiper class="swiper" :autoplay="true" :interval="3000" :circular="true">
				<swiper-item v-for="(item, index) in banner" :key="index">
					<img style="width: 100%;object-fit: contain;border-radius: 12px;" :src="item.image_url" alt="" />
				</swiper-item>
			</swiper>
		</div>
		<div class="mox">
			<div class="tom" v-for="(item,index) in list" :key="index" @click="fun(item)">
				<div class="tom-img">
					<img style="width: 100%;object-fit: contain;" :src="item.activity_cover_path" alt="" />
				</div>
				<div class="tom-som">
					<div>
						<div class="tom-som-h" style="display: flex;justify-content: space-between;">
							<div>{{ item.activity_title }}</div>
							<div style="position: absolute;right: 12px;">
								<text class="tom-som-span">{{ item.activity_price }}元</text>/位
							</div>
						</div>
						<div>{{ item.activity_describe }}</div>
					</div>

				</div>
				<div class="tom-fixed">
					<div style="font-weight: 600;">{{ item.year }}</div>
					<div style="font-size: 10px;margin-top: -4px;">——</div>
					<div style="font-weight: 600;font-size: 10px;margin-top: -4px;">{{ item.month }}月</div>
				</div>
			</div>

			<!-- 加载更多提示 -->
			<div class="loading-more" v-if="loading">加载中...</div>
			<div class="no-more" v-if="noMore && list.length > 0">没有更多数据了</div>
		</div>
		<div style="width: 100%;height: 80px;"></div>
		<custom-tabbar :current="currentTabIndex" />
	</view>
</template>

<script>
	import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue';
	import {
		banner_getHomeBannerList,
		activity_getHomeActivityList
	} from '@/api/system/user.js'

	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				currentTabIndex: 0,
				list: [],
				banner: [],
				page: 1, // 当前页码
				size: 5, // 每页数量
				loading: false, // 是否正在加载
				noMore: false, // 是否没有更多数据
				count: 0, // 总数据量
				search: '', // 搜索关键词
				activity_category_id: 0, // 活动分类ID
				city_id: 0 // 城市ID
			}
		},
		created() {
			this.banner_getHomeBannerList();
			this.activity_getHomeActivityList();
		},
		onReachBottom() {
			// 滚动到底部时加载更多
			if (!this.noMore && !this.loading) {
				this.page++;
				this.activity_getHomeActivityList();
			}
		},
		methods: {
			async activity_getHomeActivityList() {
				if (this.loading) return;

				this.loading = true;

				try {
					const data = await activity_getHomeActivityList({
						page: this.page,
						size: this.size,
						search: this.search,
						activity_category_id: this.activity_category_id,
						city_id: this.city_id
					});

					const newItems = data.content.data.map(item => ({
						...item,
						year: '',
						month: ''
					}));

					for (let i = 0; i < newItems.length; i++) {
						const dateStr = newItems[i].created_at;
						const datePart = dateStr.split(" ")[0]; // "2025-10-17"
						const [year, month] = datePart.split("-"); // ["2025", "10", "17"]
						newItems[i].year = year;
						newItems[i].month = month;
					}

					// 如果是第一页，直接赋值，否则追加
					if (this.page === 1) {
						this.list = newItems;
					} else {
						this.list = [...this.list, ...newItems];
					}

					// 判断是否还有更多数据
					this.count = data.content.count || 0;
					if (this.list.length >= this.count || newItems.length < this.size) {
						this.noMore = true;
					} else {
						this.noMore = false;
					}

				} catch (error) {
					console.error('加载活动列表失败:', error);
					// 如果是第一页加载失败，重置页码
					if (this.page > 1) {
						this.page--;
					}
				} finally {
					this.loading = false;
				}
			},
			async banner_getHomeBannerList() {
				const data = await banner_getHomeBannerList();
				this.banner = data.content.data;
			},
			fun(item) {
				const params = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/activityDeatails?data=${params}`
				});
			},
			// 下拉刷新
			async onPullDownRefresh() {
				this.page = 1;
				this.noMore = false;
				await this.activity_getHomeActivityList();
				uni.stopPullDownRefresh();
			}
		}
	}
</script>

<style lang="less" scoped>
	.normal-login-container {
		background-color: #f4f4f4;
		/* 添加页面背景色 */
		min-height: 100vh;
		padding-top: 1px;
		/* 确保背景色覆盖整个页面 */
	}

	.mox {
		width: 93%;
		margin-left: 12px;
		margin-top: 20px;
	}

	.swiper {
		width: 100%;
		height: 240px;
	}

	.tom {
		width: 100%;
		border-radius: 12px;
		background: #ffffff;
		overflow: hidden;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		position: relative;

		.tom-fixed {
			position: absolute;
			top: 0;
			right: 30px;
			background: #339966;
			width: 60px;
			text-align: center;
			color: #ffffff;
			padding-top: 3px;
			padding-bottom: 3px;
			border-radius: 0% 0% 35% 35%;
		}

		.tom-img {
			width: 100%;
		}

		.tom-som {
			padding: 20px 12px 20px 25px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #339966;
			font-weight: 500;
			font-size: 13px;
width: 100%;
			.tom-som-h {
				font-weight: 600;
				font-size: 16px;
				margin-bottom: 10px;
				color: #333;
			}

			.tom-som-span {
				font-weight: 600;
				font-size: 18px;
				color: #ff5a5f;
			}
		}
	}

	/* 加载更多样式 */
	.loading-more,
	.no-more {
		text-align: center;
		padding: 20rpx;
		color: #999;
		font-size: 28rpx;
	}

	.no-more {
		color: #ccc;
	}
</style>